<template>
    <page-header-wrapper :title="false">
      <a-card
        title="组员数据详情"
        :loading="loading"
      >
        <a-row type="flex" justify="start" align="middle">
          <a-col flex="100px">
            <a-avatar :src="memberDetail.image" :size="100" icon="user" />
          </a-col>
          <a-col flex="100px" :style="{ marginLeft: '30px' }">
            <h3>{{memberDetail.name}}</h3>
            <a-tag>入职{{memberDetail.egis_at}}天</a-tag>
          </a-col>
          <a-col flex="40px">
            <a-divider type="vertical" :style="{ height: '60px' }" />
          </a-col>
          <a-col flex="800px">
            <a-descriptions
              :column="4"
            >
              <a-descriptions-item label="微信">{{memberDetail.wx}}</a-descriptions-item>
              <a-descriptions-item label="出生日期">{{memberDetail.birthday}}</a-descriptions-item>
              <a-descriptions-item label="入职时间">{{memberDetail.hiredate}}</a-descriptions-item>
              <a-descriptions-item label="状态">上班</a-descriptions-item>
              <a-descriptions-item label="联系电话">{{memberDetail.phone}}</a-descriptions-item>
              <a-descriptions-item label="是否已婚">否</a-descriptions-item>
              <a-descriptions-item label="QQ">{{memberDetail.qq}}</a-descriptions-item>
              <a-descriptions-item label="已获积分">-</a-descriptions-item>
            </a-descriptions>
          </a-col>
        </a-row>
      </a-card>
      <a-card
        :style="{ marginTop: '20px' }"
        :loading="loading"
      >
        <a-tabs type="card" @change="onTabs">
          <a-tab-pane key="1" tab="所有合同"></a-tab-pane>
          <a-tab-pane key="2" tab="所有业务"></a-tab-pane>
          <a-tab-pane key="3" tab="所有通话"></a-tab-pane>
          <a-tab-pane key="4" tab="所有客户"></a-tab-pane>
        </a-tabs>
        <div class="member_content">
          <m-business v-if="tab == 2"></m-business>
          <m-contract v-if="tab == 1"></m-contract>
          <call-time v-if="tab == 3"></call-time>
          <m-customer v-if="tab == 4"></m-customer>
        </div>
      </a-card>
    </page-header-wrapper>
</template>

<script>
  import MContract from './components/MContract'
  import MBusiness from './components/MBusiness'
  import { getMemberDetail } from '@/api/member'
  import CallTime from '@/views/member/components/CallTime'
  import MCustomer from '@/views/member/components/MCustomer'

  export default {
    components: {
      MCustomer,
      CallTime,
      MBusiness,
      MContract
    },
    name: 'MemberDetail',
    data () {
      return {
        queryParam: {},
        memberDetail: {},
        loading: true,
        uid: '',
        tab: '1'
      }
    },
    activated () {
      this.queryParam['type'] = 1
      this.queryParam['uid'] = this.$route.params.id
      this.getMemberDetail(this.queryParam)
    },
    methods: {
      getMemberDetail (parameter) {
        this.loading = true
        getMemberDetail(parameter).then(res => {
          if (res.status === 0) {
            this.memberDetail = res.result.userInfo
            this.memberDetail['egis_at'] = res.result.egis_at
            this.loading = false
          }
        })
      },
      onTabs (key) {
        this.tab = key
        this.queryParam['type'] = key
      }
    }
  }
</script>

<style scoped>

</style>
